<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/gallery.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>

	</head>
	<body>

		<herder>
			<!-- 头部导航栏区域 -->
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user nav_color">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil nav_color">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus nav_color">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart nav_color">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down nav_color ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>


			<!-- 头部导航栏搜索框区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">
			
				<div class=" " style="background-color: rgba(0,0,0,0.8);">
			
					<div class="container py-4">
			
						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">
			
							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>
			
							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;" >
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i class="fa fa-search text-white"></i></button>
			
								</form>
							</li>
						</ul>
			
					</div>
			
			
				</div>
			
			</div>
			<!-- 头部导航栏分栏 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link ">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="#" class="nav-link defoult">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>


			<!-- -->

		</herder>

		<!-- 中部区域 -->
		<main>

			<!-- 中部第一个说明区域 -->
			<div class="row m-0">
				<div class="col-12 pl-0 pr-0 py-5" style="background-image: url(images/choose_bg.jpg);">
					<div class=" py-5 w-100 " style="background-color: rgba(0,0,0,0.3); background: repeat; ">
						<div class=" text-center">
							<h2 class="m-0" style="color: #E4606D;">Gallery</h2>
							<hr class="" style="width: 105px; background-color: #E4606D; margin-top: 1px;">
							<hr class="" style="width: 65px; background-color: #E4606D; margin-top: -12px">
							<p style="color: #E4606D;">Home<i class="text-dark"> / Gallery</i></p>
						</div>
					</div>
				</div>
			</div>


			<!-- 中部图片展示区域-->


			<div class="container">
				<ul class="row  mt-5 mb-5 ml-0 pl-0">
					<li class="col-md-3  col-12  py-3">
						<img src="images/gallery1.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-3  col-12 py-3">
						<img src="images/gallery2.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-6  col-12  py-3 ">
						<img src="images/gallery3.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-6  col-12  py-3">
						<img src="images/gallery4.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-3  col-12  py-3 ">
						<img src="images/gallery5.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-3  col-12  py-3 ">
						<img src="images/gallery6.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-6  col-12  py-3 ">
						<img src="images/gallery7.jpg" class="w-100 h-100">
					</li>

					<li class="col-md-6  col-12  py-3 ">
						<img src="images/gallery8.jpg" class="w-100 h-100">
					</li>
				</ul>
			</div>
		</main>


		<!-- 底部区域 -->
		<footer>

			<!-- 中底部的五个导航栏区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row d-flex justify-content-center justify-content-sm-center text-center m-0 pl-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部黑色部分的区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部介绍区域的部分 -->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a> by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
